前言

昨天我們介紹了 ViewModel，今天繼續使用 ViewModel 來對活動列表頁進行客製化顯示。

ViewModel

今天將調整活動列表頁的欄位，除了將不需要顯示的 CreateTime 這種欄位拿掉以外，還要顯示 EventsInfo 的活動詳細資料，從原本的 Index.cshtml 來看，我們該移除 CreateTime 等欄位以及加入 EventsInfo：

EventsListViewModel：

View

將 Model 指定為新建立的 EventsListViewModel，也可以看到欄位名稱的取值也有些改變，因為 Model 的 Property 改成 IEnumerable。

Controller

這次的 ViewModel 只包含了可列舉的 Events，讓 Events 除了可以取得 Events 本身的資料外，也能塞 EventsInfo 的資料，這邊可以看到 EventsController 的 Index Action 的內容：

原本只是回傳 await _context.Events.ToListAsync(); 給 View，現在因為 View 的 Model 改成 EventsListViewModel，所以傳的東西也要改成 ViewModel。

可以看到除了將 await _context.Events.ToListAsync(); 取得的 Events 資料放在 ViewModel 的 EventsCollection 之外，下方還有跑一個 foreach，並以 Events 的 Id
為條件，去撈 EventsInfo 的資料，並且依序放到 EventsCollection.EventsInfo。

瀏覽成果

欄位皆顯示我們指定的，且也正常撈出 EventsInfo 的資料。（前兩筆是因為沒有 EventsInfo 資料XD）

本日結語

雖然資料取值看似都很正常，但回頭看 Controller 的 Code，可以發現 Code 應該是可以更簡短的，也就是取 Events 與 EventsInfo 的資料應該可以在其他地方做好 Function，讓 Controller 去呼叫就好，而且未來如果要取同樣的資料時，就不用再寫一次重複的 Code 了。

下一篇會介紹 Repository Pattern，讓我們不讓 Controller 直接耦合 EF Core，以及讓後端的 CRUD Code 更簡潔，那麼我們明天見！

Reference

[鐵人賽Day11] ASP.Net Core MVC 進化之路 - View(1) / 資料傳遞及Razor語法

Multiple Models in Single View in MVC